<template>
  <el-header class="me-area">
    <el-row type="flex" class="row-bg me-header" justify="center">

      <el-col :span="3" class="me-header-left">
        <router-link to="/" class="me-title">
          <img src="../assets/img/logo.png" />
        </router-link>
      </el-col>

      <el-col v-if="!simple" :offset="4" :xl="6" :lg="8" :md="12">
        <el-menu
          :router="true"
          menu-trigger="click"
          active-text-color="#4267b2"
          text-color="#f2f3f5"
          :default-active="activeIndex"
          mode="horizontal"
        >
          <el-menu-item index="/">首页</el-menu-item>
          <el-menu-item index="/category/all">文章分类</el-menu-item>
          <el-menu-item index="/tag/all">标签</el-menu-item>
          <el-menu-item index="/archives">文章归档</el-menu-item>
          <el-menu-item index="/feedback">留言板</el-menu-item>
        </el-menu>
      </el-col>

      <template v-else>
        <slot></slot>
      </template>
    </el-row>
  </el-header>
</template>

<script>
export default {
  name: "BaseHeader",
  props: {
    activeIndex: String,
    simple: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {};
  }
};
</script>

<style>
.el-header {
  background-color: #4267b2;
  border-bottom: 1px solid #29487d;
  position: fixed;
  z-index: 1024;
  min-width: 100%;
  box-shadow: 0 2px 3px hsla(0, 0%, 7%, 0.1), 0 0 0 1px hsla(0, 0%, 7%, 0.1);
}

.el-menu {
  background-color: #4267b2;
}

.el-menu-item:hover{
  color: #4267b2 !important;
}

.el-menu-item.is-active{
  background-color: #f2f3f5 !important;
}

.me-title {
  margin-top: 10px;
  font-size: 24px;
}

.me-header-left {
  margin-top: 10px;
}

.me-title img {
  max-height: 2.4rem;
  max-width: 100%;
}

.me-header-picture {
  width: 36px;
  height: 36px;
  border: 1px solid #ddd;
  border-radius: 50%;
  vertical-align: middle;
  background-color: #5fb878;
}
</style>
